<template>
    <!-- tabbar -->
    <div class="tabbar">
        <el-row>
            <el-col :lg="{span:4,offset:1}" class="icon">

            </el-col>
            <el-col :lg="{span:18}" class="tabbar-content">
                <ul>
                    <li><a @click="turnToHome"><i class="iconfont icon-home"></i> 首页</a></li>
                    <li><a @click="turnToMessage"><i class="iconfont icon-liuyan"></i>留言板</a></li>
                    <li><a @click="turnToForum"><i class="iconfont icon-liaotian"></i>分享空间</a></li>
                    <li><a @click="turnToPersonal"><i class="iconfont icon-my"></i>个人中心</a></li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    export default {
        name: "tab-bar",
        methods:{
            turnToContent(){
                this.$router.push('/content').catch(error=>error)
            },
            turnToHome(){
                this.$router.push('/').catch(error=>error)
            },
            turnToCollection(){
                this.$router.push('/collection').catch(error=>error)
            },
            turnToMessage(){
                this.$router.push('/message').catch(error=>error)
            },
            turnToForum(){
                this.$router.push('/forum').catch(error=>error)
            },
            turnToPersonal(){
                this.$router.push('/personalInfo').catch(error=>error)
            }
        }
    }
</script>

<style scoped>
.tabbar{
    height: 54px;
    background-color: rgba(10,10,0,0.7);
}
.tabbar-content>ul{
    height: 54px;
    align-content: center;
}
.tabbar-content>ul li{
    line-height: 54px;
    display: block;
    font-size: 14px;
    color: white;
    float: left;
    width: 105px;
    text-align: center;
}
.icon{
    height: 54px;
    background-image: url("https://cdn.jsdelivr.net/gh/hhgal/mycdn2/website/wp-content/themes/mygalgame2/ui/images/logo.png");
}
.tabbar-content>ul li a{
    display: block;
    padding: 0px 15px;
}

</style>